<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .svg {
        background-color: gray;
      }
    </style>
  </head>
  <body>
    <svg class="svg" width="1200" height="400">
      <!-- 画线段 -->
      <line x1="100" y1="100" x2="200" y2="200" stroke="green"></line>
      <!-- 画折线 -->
      <polyLine
        points="200 50,300 200,400 150"
        fill-opacity="0"
        stroke="green"
      ></polyLine>
      <!-- 画矩形 -->
      <rect
        x="500"
        y="100"
        width="100"
        height="50"
        fill-opacity="0"
        stroke="yellow"
      ></rect>
      <!-- 画圆 -->
      <circle
        cx="100"
        cy="250"
        r="50"
        fill-opacity="0"
        stroke="yellow"
      ></circle>
      <!-- 画椭圆 -->
      <ellipse
        cx="600"
        cy="200"
        rx="100"
        ry="50"
        fill-opacity="0"
        stroke="yellow"
      ></ellipse>
      <!-- 画任意图形 -->
      <path
        d="
          M 900 150,
          L 1100 150,
          L 950 280,
          L 1000 80,
          L 1050 280,
          Z
        "
        fill-opacity="0"
        stroke="#000"
      ></path>
    </svg>
  </body>
</html>
